<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
  >
    <el-menu-item index="0">
      <img
          style="width: 230px"
          src="@/assets/logo.png"
      />
    </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">试卷中心</el-menu-item>
    <el-sub-menu index="3">
      <template #title>智能训练</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>试卷中心</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="4">考试记录</el-menu-item>
    <el-menu-item index="5">错题本</el-menu-item>
    <div>
<!--      <el-avatar-->
<!--          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"-->
<!--      />-->
      <svg  t="1711269017181" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13042" width="200" height="200"><path d="M452.52096 855.69024h120.40192v-134.8608H452.52096z" fill="#FDCC9B" p-id="13043"></path><path d="M452.52096 736.70656s50.6368 32.26112 120.3968 24.80128v-40.6784H452.52096v15.87712zM337.65888 511.72864c0 37.0176-26.30144 67.04128-58.75712 67.04128-32.44032 0-58.74176-30.02368-58.74176-67.04128 0-37.0176 26.30144-67.0208 58.74176-67.0208 32.45568 0 58.75712 30.0032 58.75712 67.0208zM805.2992 511.72864c0 37.0176-26.3168 67.04128-58.75712 67.04128-32.44032 0-58.74176-30.02368-58.74176-67.04128 0-37.0176 26.30144-67.0208 58.74176-67.0208 32.44032 0 58.75712 30.0032 58.75712 67.0208z" fill="#FCBC85" p-id="13044"></path><path d="M746.30144 383.70816c0-98.71872-72.2432-170.96192-233.57952-170.96192-161.34144 0-233.56416 72.2432-233.56416 170.96192 0 98.7392-16.86016 358.79936 233.56416 358.79936 250.43968 0 233.57952-260.06016 233.57952-358.79936z" fill="#FDCC9B" p-id="13045"></path><path d="M424.23808 495.68768c0 15.29856-11.32032 27.6992-25.27744 27.6992-13.96224 0-25.30304-12.40064-25.30304-27.6992s11.3408-27.6992 25.30304-27.6992c13.95712 0 25.27744 12.40064 25.27744 27.6992z" fill="#3B2519" p-id="13046"></path><path d="M395.49952 483.45088a7.56736 7.56736 0 0 1-15.11936 0c0-4.16256 3.3792-7.56224 7.56224-7.56224a7.5776 7.5776 0 0 1 7.55712 7.56224z" fill="#FFFFFF" p-id="13047"></path><path d="M358.5024 427.04896c11.9552 5.98016 31.1552-20.32128 75.10016 2.56 8.01792 4.17792 12.8-35.6608-34.304-35.6608-40.79616 0-48.02048 29.50144-40.79616 33.1008z" fill="#4C2D19" p-id="13048"></path><path d="M654.8992 495.68768c0 15.29856-11.32032 27.6992-25.27744 27.6992-13.96224 0-25.28256-12.40064-25.28256-27.6992s11.32032-27.6992 25.28256-27.6992c13.95712 0 25.27744 12.40064 25.27744 27.6992z" fill="#3B2519" p-id="13049"></path><path d="M626.16064 483.45088c0 4.17792-3.3792 7.55712-7.56224 7.55712a7.56736 7.56736 0 1 1 7.56224-7.55712z" fill="#FFFFFF" p-id="13050"></path><path d="M666.94144 427.04896c-11.96032 5.98016-31.16032-20.32128-75.10016 2.56-8.00256 4.17792-12.77952-35.6608 34.31936-35.6608 40.7808 0 48 29.50144 40.7808 33.1008z" fill="#4C2D19" p-id="13051"></path><path d="M512.72192 593.09056c-24.98048 0-40.02304-18.6624-40.02304-9.64096 0 9.0368 7.2192 26.19904 40.02304 26.19904 32.8192 0 40.0384-17.16224 40.0384-26.19904 0-9.02144-15.05792 9.64096-40.0384 9.64096zM512.72192 676.10624c-8.64256 0-13.83936-6.43584-13.83936-3.31776 0 3.11808 2.49856 9.0624 13.83936 9.0624 11.35616 0 13.85984-5.94432 13.85984-9.0624s-5.2224 3.31776-13.85984 3.31776z" fill="#FCBC85" p-id="13052"></path><path d="M512.72192 653.1072c-39.6032 0-63.4624-16.13824-63.4624-12.03712 0 4.08064 11.45856 20.15744 63.4624 20.15744 52.0192 0 63.45728-16.0768 63.45728-20.15744 0-4.08064-23.8592 12.03712-63.45728 12.03712z" fill="#F7945E" p-id="13053"></path><path d="M512.72192 775.00928v151.72096H220.16c0-61.41952 154.10176-151.72096 292.56192-151.72096z" fill="#F6A4B7" p-id="13054"></path><path d="M512.72192 775.00928v151.72096h292.57728c-0.02048-61.41952-154.11712-151.72096-292.57728-151.72096z" fill="#F6A4B7" p-id="13055"></path><path d="M452.52096 780.26752s17.61792 21.84192 60.20096 21.84192c42.5984 0 60.19584-21.84192 60.19584-21.84192s-62.45888-22.73792-120.3968 0z" fill="#FDCC9B" p-id="13056"></path><path d="M427.83744 926.73024l-12.43648-138.48064s-26.46016-3.64032-58.24 19.44064l-26.39872 119.04h97.0752zM512.72192 802.10944v124.6208h-41.54368l8.1408-57.344-23.94112-25.29792zM597.60128 926.73024l12.45696-138.48064s26.43968-3.64032 58.21952 19.44064l26.40384 119.04h-97.08032zM512.72192 802.10944v124.6208h41.53856l-8.12032-57.344 23.92064-25.29792z" fill="#665853" p-id="13057"></path><path d="M572.91776 765.3888l-60.19584 36.72064 63.45728 63.22176 47.13984-73.38496s-30.81728-30.336-50.40128-26.55744zM452.52096 765.3888l60.20096 36.72064-63.4624 63.22176-47.13984-73.38496s30.83776-30.336 50.40128-26.55744z" fill="#F2788F" p-id="13058"></path><path d="M770.97984 212.12672c-5.6576-11.15648-21.6576-12.63616-30.10048-17.43872-8.41728-4.81792-8.41728-25.29792-24.07936-33.72032-15.6416-8.41728-18.05824 4.82304-29.02016 2.40128-10.94144-2.40128-21.53984-24.07936-35.99872-28.88192-14.45888-4.81792-27.67872 4.80256-38.52288 2.40128-10.83904-2.40128-18.05824-25.27744-37.07904-24.07936-19.0208 1.19808-19.51744 14.4384-23.41888 13.24032-3.92192-1.19808-16.55808-31.29856-40.0384-31.29856-23.45984 0-36.1216 30.10048-40.02304 31.29856-3.9168 1.19808-4.41856-12.04224-23.43936-13.24032-19.00032-1.19808-26.21952 21.67808-37.05856 24.07936-10.83904 2.42176-24.05888-7.2192-38.52288-2.40128-14.45888 4.82304-25.05728 26.48064-36.0192 28.9024-10.9568 2.40128-13.35808-10.83904-29.02016-2.42176-15.63648 8.44288-15.63648 28.9024-24.07936 33.72032-8.41728 4.82304-24.41728 6.28224-30.10048 17.4592-20.45952 40.32 16.15872 324.80256 31.95904 324.80256 15.77984 0 6.58432-144.79872 30.66368-200.20224 24.07936-55.37792 116.77696-7.2192 195.64032-7.2192 78.85824 0 171.57632-48.15872 195.65568 7.2192 24.08448 55.40352 14.88384 200.20224 30.66368 200.20224 15.80032 0 52.41856-284.48256 31.93856-324.82304z" fill="#4C2D19" p-id="13059"></path></svg>
    </div>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style>
.flex-grow {
  flex-grow: 1;
}
svg{
  width: 50px;
  height: 50px;
  padding-right: 10px;
}
</style>
